<template>
  <div>
    <FormCard title="取消授权" :back="back">
      <a-card class="mt-8">
        <a-flex class="justify-between mb-8">
          <a-input-search
            v-model:value="userQuery.userName"
            placeholder="请输入用户名"
            allow-clear
            style="width: 200px"
            @search="unassignUsers"
          ></a-input-search>
          <a-button
            type="primary"
            :disabled="userData.selectedKeys.length === 0"
            @click="unassign()"
            danger
          >
            批量取消
          </a-button>
        </a-flex>
        <a-table
          :columns="formatColumns(userColumns)"
          :loading="loading"
          :data-source="userData.data"
          :pagination="{
            total: userQuery.total,
            current: userQuery.pageNum,
            pageSize: userQuery.pageSize,
          }"
          :row-selection="{
            selectedRowKeys: userData.selectedKeys,
            onChange,
          }"
          @change="pageChange"
          row-key="userId"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'operation'">
              <a-tooltip title="">
                <a-button type="link" style="color: #fc6d6d" @click="unassign(record.userId)">
                  取消授权
                </a-button>
              </a-tooltip>
            </template>
          </template>
        </a-table>
      </a-card>
    </FormCard>
  </div>
</template>

<script setup lang="ts">
import { formatColumns } from '@/utils/table/table';
import type { PaginationProps } from 'ant-design-vue/es/pagination';
import { userColumns } from './columns';
import { loading, onChange, unassign, unassignUsers, userData, userQuery } from './data';
import { roleFormMode, RoleViewNum } from '../../data/table';

const pageChange = (page: PaginationProps) => {
  userQuery.value.pageNum = page.current!;
  userQuery.value.pageSize = page.pageSize!;
  unassignUsers();
  back();
};
const back = () => {
  roleFormMode.value = RoleViewNum.ROLE_TABLE;
};
</script>

<style lang="scss" scoped>
.allocate-modal {
  position: absolute;
  width: 80%;
  height: 90%;
  border: 1px solid var(--border-color);
  background: #f8f8f8;
  top: 5%;
  left: 10%;
  box-shadow: 0 0 12px #8080804f;
}
.system__icon {
  &:hover {
    background: #eee;
  }
}
.user-list {
  overflow: auto;
}
</style>
